<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>高校教材管理系统-注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
    <link href="css/thin-admin.css" rel="stylesheet" media="screen" />
    <link href="css/font-awesome.css" rel="stylesheet" media="screen" />
    <link href="css/index.css" rel="stylesheet" media="screen" />
    <link href="style/style.css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/smooth-sliding-menu.js"></script>
</head>

<body>
    <section id="main" style='margin : 5% auto;'>
        <div class="title">高校教材管理系统</div>
        <div id="tip">
        </div>
        <div class="widget">
            <div class="login-content">
                <div class="widget-content" style="padding-bottom:0;">
                    <form method="POST" action="${pageContext.request.contextPath}/reg" class="no-margin"
                        onsubmit="return checkLogin(this);">
                        <h3 class="form-title">管理员注册</h3>

                        <fieldset>
                            <div class="form-group no-margin">
                                <label for="adminId">
                                		账号
                                	<span style="margin-left: 10px;font-size: 12px;color:#eee;font-weight:100;">/*最大长度为10*/</span>
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-addon">
                                        <i class="icon-user"></i>
                                    </span>
                                    <input id="userAcount-input" type="text" placeholder="请输入你要注册的账号" name="userAcount"
                                        class="form-control input-lg" id="adminId" />
                                </div>

                            </div>
                            
                            <div class="form-group">
                                <label for="password">
                                	密码
                                	<span style="margin-left: 10px;font-size: 12px;color:#eee;font-weight:100;">/*最大长度为25*/</span>
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-addon">
                                        <i class="icon-lock"></i>
                                    </span>
                                    <input type="password" placeholder="请输入你要注册的密码" class="form-control input-lg" id="password" name="pwd" />
                                </div>
                            </div>
                            
                            <div class="form-group no-margin" style="margin-bottom:0px;">
                                <label for="username">用户名  
                                	<span style="margin-left: 10px;font-size: 12px;color:#eee;font-weight:100;">/*最大长度为10*/</span>
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-addon">
                                        <i class="icon-user"></i>
                                    </span>
                                    <input id="customerName" type="text" placeholder="请输入你要注册的用户名"  name="customerName"
                                        class="form-control input-lg" id="username" />
                                </div>
                                
                                <div class="alert alert-danger fade hide" id="alert-adminUpdate" style="padding: 5px;font-size: 13px;
                                		text-align: center;margin: 0;margin-top: 9px;">
									<span class="close close-alert-admin">
										<span style="line-height: 20px;">&times;</span>
									</span>
									<p class="alert-admin-UpdateTip"></p>
								</div>
                            </div>
                        </fieldset>
                        <div class="login-footer">
                            <input type="submit" value="注册">
                            <a class="login-to-reg" href="${pageContext.request.contextPath}/LoginServlet">去登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script>
    
    	var IsOk = true
	    jQuery(".close-alert-admin").on("click",function (){
	    	jQuery("#alert-adminUpdate").alert("close")
	    })
	    
   		jQuery("#customerName").keyup(function(){
   	        var len = jQuery(this).val().length
 	        if(len >= 10){
 				IsOk = false
   				jQuery('#alert-adminUpdate').removeClass('alert-danger').addClass('alert-warning')
   				jQuery('#alert-adminUpdate').removeClass('hide').addClass('in')
   				jQuery('.alert-admin-UpdateTip').text('用户名最大长度为10！！！')
   		        jQuery(this).val(jQuery(this).val().substring(0,10))
   		        jQuery("#customerName-input").text(0)
   		    }else {
   				IsOk = true
   			}
   		})
   		
   		jQuery("#userAcount-input").keyup(function(){
   	        var len = jQuery(this).val().length
 	        if(len >= 10){
 				IsOk = false
   				jQuery('#alert-adminUpdate').removeClass('alert-danger').addClass('alert-warning')
   				jQuery('#alert-adminUpdate').removeClass('hide').addClass('in')
   				jQuery('.alert-admin-UpdateTip').text('账号最大长度为10！！！')
   		        jQuery(this).val(jQuery(this).val().substring(0,10))
   		        jQuery("#userAcount-input").text(0)
   		    }else {
   				IsOk = true
   			}
   		})
   		
   		jQuery("#password").keyup(function(){
   	        var len = jQuery(this).val().length
 	        if(len >= 10){
 				IsOk = false			
   				jQuery('#alert-adminUpdate').removeClass('alert-danger').addClass('alert-warning')
   				jQuery('#alert-adminUpdate').removeClass('hide').addClass('in')
   				jQuery('.alert-admin-UpdateTip').text('密码最大长度为25！！！')
   		        jQuery(this).val(jQuery(this).val().substring(0,25))
   		        jQuery("#password").text(0)
   		    }else {
   				IsOk = true	
   			}
   		})
   		
        function checkLogin(form) {
            if (form.userAcount.value == '' || form.pwd.value == '' || form.customerName.value == '') {
            	jQuery('#tip').stop().fadeIn().text('请输入参数！！！')
                setTimeout(function () {
                	jQuery('#tip').stop().fadeOut()
                }, 1500)
                return false
            } else {
            	console.log(IsOk)
            	if(!IsOk){
            		return false
            	}else {
            		jQuery.ajax({
                        method: 'post',
                        url: '/TeachingTest/reg',
                    	data: jQuery(form).serialize(),
                    	dataType : "text",
                    	error : function (error){
                    		console.log(error)
                    	},
                    	success : function (res){
                    		res = JSON.parse(res)
                            if (res.status != '200') {
                            	jQuery('#tip').stop().fadeIn().text(res.infoMsg)
                                 setTimeout(function () {
                                	 jQuery('#tip').stop().fadeOut()
                                 }, 1500)
                            }else {
                            	window.location.href = '/TeachingTest/LoginServlet?p=success'
                            }
                    	}
                    })
            	}
                return false
            }
        }
    </script>
</body>

</html>